<script setup>
import { ref,reactive } from 'vue';
import { Iphone, Lock, User} from "@element-plus/icons-vue";
import request from "@/utils/http.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const phone = ref('');
const uid = ref('');
const captcha = ref('');
const activeTab = ref('account'); // 新增：用于控制当前激活的标签
const countdown = ref(0); // 验证码倒计时

const data = reactive({
  form:{
    uid:null,
    password:null
  }
})

const formRef = ref()

const rules =reactive({
  uid: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]
})

// 账号密码登录
const login = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post('/user/login', data.form).then(res => {
        if (res.code === 200) {
          ElMessage.success('登录成功');
          console.log(res.data);
          // 将用户信息保存到store中
          const userStore = useUserStore();
          userStore.alterUserInfo(res.data);
          // 根据用户角色跳转到不同页面
          if (res.data.role === 'admin') {
            // 管理员跳转到管理员页面
            router.push('/admin');
          } else {
            // 普通用户跳转到首页
            router.push('/homePage');
          }

        } else {
          ElMessage.error(res.message || '登录失败');
        }
      }).catch(error => {
        console.error('登录错误:', error);
        if (error.message === 'Network Error') {
          ElMessage.error('网络错误，请检查您的网络连接或服务器状态');
        } else {
          ElMessage.error('登录失败，请稍后重试');
        }
      });
    }
  });
}

// 短信验证码登录
const loginBySMS = () => {
  if (!phone.value || !captcha.value) {
    ElMessage.error('请输入手机号和验证码');
    return;
  }
  
  request.post('/user/login/sms', {
    phone: phone.value,
    code: captcha.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage.success('登录成功');
      console.log(res.data);
      // 将用户信息保存到store中
      const userStore = useUserStore();
      userStore.alterUserInfo(res.data);
      // 根据用户角色跳转到不同页面
      if (res.data.role === 'admin') {
        // 管理员跳转到管理员页面
        router.push('/admin');
      } else {
        // 普通用户跳转到首页
        router.push('/homePage');
      }
    } else {
      ElMessage.error(res.message || '登录失败');
    }
  }).catch(error => {
    console.error('短信登录错误:', error);
    ElMessage.error('登录失败，请稍后重试');
  });
}

// 发送短信验证码
const sendSMS = () => {
  if (!phone.value) {
    ElMessage.error('请输入手机号');
    return;
  }
  
  // 验证手机号格式
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    ElMessage.error('请输入正确的手机号');
    return;
  }
  
  // 防止重复发送
  if (countdown.value > 0) {
    return;
  }
  
  request.post('/user/sms/send', {
    phone: phone.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage.success('验证码发送成功');
      // 开始倒计时
      countdown.value = 60;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    } else {
      ElMessage.error(res.message || '验证码发送失败');
    }
  }).catch(error => {
    console.error('发送验证码错误:', error);
    ElMessage.error('验证码发送失败，请稍后重试');
  });
}

</script>

<template>
  <div class="login-container">
    <div class="top-section">
      <div class="top-bar">
        <div class="welcome-text">欢迎来到俊东智农销</div>
        <div class="right-links">
          <span>个人中心</span>
          <span>供应商后台</span>
          <span>手机版</span>
        </div>
      </div>
      <div class="divider"></div>
      <el-header class="header">
        <div class="logo-container">
          <el-image src="../src/assets/logo.png" style="width: 70px; height: 70px" alt="俊东智农销平台"></el-image>
          <span class="platform-name">俊东俊东智农销平台</span>
        </div>
      </el-header>
    </div>
    <div class="main-content">
      <el-image class="background-image" src="../src/assets/img/login-background.jpg" fit="cover">
        <template #error>
          <div class="image-error">图片加载失败</div>
        </template>
      </el-image>
      <div class="login-form-container">
        <el-tabs v-model="activeTab" class="login-tabs">
          <el-tab-pane label="扫码登录" name="qrcode"></el-tab-pane>
          <el-tab-pane label="短信登录" name="sms"></el-tab-pane>
          <el-tab-pane label="账号登录" name="account"></el-tab-pane>
        </el-tabs>
        <el-form ref="formRef" class="login-form" v-if="activeTab === 'account'" :model="data.form" :rules="rules">
          <el-form-item>
            <el-input v-model="data.form.uid" placeholder="请输入账号">
              <template #prefix>
                <el-icon><User/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="data.form.password" type="password" placeholder="请输入密码">
              <template #prefix>
                <el-icon><Lock/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
          </el-form-item>
          <span style="text-align: right;color: #888888">忘记密码</span>
        </el-form>

        <div class="login-form qrcode-form" v-if="activeTab === 'qrcode'">
          <div class="qrcode-container">
            <el-image src="../src/assets/img/qrcode.png" class="qrcode-image"></el-image>
            <p class="qrcode-text">打开<span class="wechat-text">微信</span>，扫一扫登录</p>
          </div>
        </div>

        <el-form class="login-form" v-if="activeTab === 'sms'">
          <el-form-item>
            <el-input v-model="phone" placeholder="请输入手机号">
              <template #prefix>
                <el-icon><Iphone/></el-icon>
              </template>
              <template #append>
                <el-button class="verify-code-button" @click="sendSMS" :disabled="countdown > 0">
                  {{ countdown > 0 ? countdown + 's后重试' : '获取验证码' }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="captcha" placeholder="请输入验证码">
              <template #prefix>
                <el-icon><Lock/></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loginBySMS" style="width: 100%;">登录</el-button>
          </el-form-item>
        </el-form>
        <!-- 可以根据需要添加其他登录方式的表单 -->
      </div>
    </div>

    <el-footer class="footer">
      <!-- 在这里添加页脚内容 -->
      <p style="color: rgb(43, 45, 48);font-size: larger">©-2024 智农销平台AgProSale-platfrom 版权所有</p>
    </el-footer>
  </div>
</template>

<style scoped lang="less">
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.top-section {
  background-color: #fff;
}

.top-bar {
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;

  .welcome-text {
    color: #333;
  }

  .right-links {
    span {
      margin-left: 15px;
      color: #666;
      cursor: pointer;

      &:hover {
        color: #409EFF;
      }
    }
  }
}

.divider {
  height: 1px;
  background-color: #e0e0e0; // 浅灰色分隔线
  margin: 0 20px; // 左右留出一些间距
}

.header {
  box-shadow: none; // 移除原有的阴影
  height: 80px;
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 10px;
    
  .platform-name {
    margin-left: 10px;
    font-size: 18px;
    font-weight: bold;
  }
}

.main-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px; // 给主内容区域添加一些
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  color: #666;
}

.footer {
  background-color: #f5f5f5;
  text-align: center;
  padding: 10px 0;
}

.login-form-container {
  width: 360px;
  min-height: 400px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
  margin-right: 100px;
  display: flex;
  flex-direction: column;
  
  .login-tabs {
    margin-bottom: 20px;
    
    :deep(.el-tabs__header) {
      margin-bottom: 20px;
    }
    
    :deep(.el-tabs__nav-wrap) {
      padding: 0;
    }
    
    :deep(.el-tabs__nav) {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    
    :deep(.el-tabs__item) {
      flex: 1;
      text-align: center;
      padding: 0 5px;
    }
  }
  
  .login-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    :deep(.el-form-item) {
      width: 100%;
    }
    :deep(.el-input) {
      width: 100%;
    }
  }
  
  .qrcode-form {
    .qrcode-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .qrcode-image {
      width: 180px;
      height: 180px;
      margin-bottom: 20px;
    }
    .qrcode-text {
      font-size: 16px;
      text-align: center;
      .wechat-text {
        color: #07C160;
      }
    }
  }
}

:deep(.el-button) {
  width: 100%;
}

.verify-code-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  background-color: #f0f0f0; // 添加浅灰色背景
  border: none;
  color: #606266; // 设置文字颜色
  transition: background-color 0.3s; // 添加过渡效果

  &:hover {
    background-color: #e0e0e0; // 鼠标悬停时的背景色
  }
}

.footer{
  background-color: rgb(34, 34, 34);
}
</style>
